let oListbox = document.querySelector('.ly-pro-list-box ul')
let arr2 = []
pAjax({
        url: '../server/list.php',
        type: 'get',
        // data: {
        //     pagenum: 1,
        //     pagesize: 10
        // }
    }).then(function(res2) {
        arr2 = JSON.parse(res2)

        let arrstr = []
        arr2.forEach(e => {
                // console.log(e.cake_detail_specs);
                if (e.cake_detail_specs) {
                    arrstr.push(
                        JSON.parse(e.cake_detail_specs)
                    )
                }

            })
            //调用函数渲染
        setWeb(arr2)


        //分类筛选字段

        // console.log(arr2)
        let nCake = document.querySelector(".cake")
        let nBread = document.querySelector(".bread")
        let nIce = document.querySelector(".ice")
        let nCoffee = document.querySelector(".coffee")
        listFilter(arr2)
        var typeListArr;
        // console.log(arr2)
        // console.log(arr2.cake_kinds)


        function listFilter(data) {
            typeListArr = data.filter(function(ele, index, self) {
                if (ele.cake_kinds === "蛋糕") {
                    return ele;
                }
            });
            typeListArr1 = data.filter(function(ele, index, self) {
                if (ele.cake_kinds === "面包") {
                    return ele;
                }
            });
            typeListArr2 = data.filter(function(ele, index, self) {
                if (ele.cake_kinds === "冰淇淋") {
                    return ele;
                }
            });
            typeListArr3 = data.filter(function(ele, index, self) {
                if (ele.cake_kinds === "咖啡") {
                    return ele;
                }
            });
            nCake.onclick = function() {
                console.log(111);
                setWeb(typeListArr)

            }
            nBread.onclick = function() {
                console.log(1221);
                setWeb(typeListArr1)
            }
            nIce.onclick = function() {
                console.log(111);
                setWeb(typeListArr2)
            }
            nCoffee.onclick = function() {
                console.log(1221);
                setWeb(typeListArr3)
            }
            console.log(typeListArr)
        }


        // console.log(typeof(arrstr[0][0]))
        //渲染页面
        function setWeb(attr) {
            oListbox.innerHTML = ""
            attr.forEach((ele, i) => {
                let str =
                    ` <li class="ly-list-goodsli">
                    <div class="ly-pro-list-su">
                        <a href="javascript:;" class="ly-goods-list">
        
                            <img data-src="${ele.cake_img}" alt="" class="ly-lazy" goodsId=${ele.cake_id} >
                            <h3>${ele.cake_name}</h3>
                            <span>${ele.cake_price}</span>
                        </a>
                        <div class="ly-label-entrance">
                            <a href=""> ${ele.cake_bottom_tig1}</a>
                            <a href="">${ele.cake_bottom_tig2}</a>
                        </div>
                        <a href="javascript:;" class="ly-por-list-addcart">
                            <i></i> 加入购物车
                        </a>
                        <div class="ly-label">
                            <img data-src="${ele.cake_top_tig}" alt="">
                        </div>
                    </div>
        
        
                    <div class="ly-boxx">
                        <div class="ly-boxx-price">
                            <span class="ly-active">${arrstr[i] && arrstr[i][0]}</span>
                            <span>${arrstr[i] && arrstr[i][1]}</span>
                            <span>${arrstr[i] && arrstr[i][2]}</span>
                            <span>${arrstr[i] && arrstr[i][3]}</span>
                        </div>
        
                        <div class="ly-boxx-list1">
                            <input class="ly-on" type="button" value="${arrstr[i] && (arrstr[i][0].substring(0,6))}" goodsId=${ele.cake_id}>
                            <input type="button" value="${arrstr[i] && (arrstr[i][1].substring(0,6))}">
                            <input type="button" value="${arrstr[i] && (arrstr[i][2].substring(0,6))}">
                            <input type="button" value="${arrstr[i] && (arrstr[i][3].substring(0,6))}">
                            <i></i>
                        </div>
        
                        <div class="ly-buttons">
                            <div class="ly-buttons1">立即购买 </div>
                            <div class="ly-buttons2"  goodsId=${ele.cake_id}> 加入购物车</div>
                        </div>
                    </div>
                </li>`
                oListbox.innerHTML += str
            })


            // 懒加载
            window.onload = loadImg;
            window.onscroll = scrollImg(loadImg);

            function loadImg() {
                let img = document.querySelectorAll("img");
                img.forEach((item, index) => {
                    if (item.getBoundingClientRect().top < window.innerHeight) {
                        item.src = item.dataset.src;
                        console.log(item.dataset.src);
                    }
                });
            }

            function scrollImg(attr) {
                let timer = null;
                let content = this;

                return function() {
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        attr.call(content);
                    }, 300);
                };
            }
            // 点击购物车
            let oJiaru1 = document.querySelectorAll('.ly-por-list-addcart')
            let oXianshi1 = document.querySelectorAll('.ly-boxx')
            let lyboxx = document.querySelector(".ly-boxx-price")
                // oJiaru.forEach((ele) => {
            for (let i = 0; i < oJiaru1.length; i++) {
                oJiaru1[i].addEventListener('click', function() {
                    oJiaru1.forEach((ele, index) => {
                        oJiaru1[index].parentElement.nextElementSibling.style.display = "none";

                    })
                    this.parentElement.nextElementSibling.style.display = "block";
                })
            }


            // 选项卡
            let aBtn = document.querySelectorAll('.ly-boxx-list1 input')
            let aDiv = document.querySelectorAll('.ly-boxx-price span')
            aBtn.forEach(function(ele, index) {
                ele.onclick = function() {
                    for (var i = 0; i < aBtn.length; i++) {
                        aBtn[i].className = ''
                        aDiv[i].className = ''
                    }
                    this.className = 'ly-on'
                    aDiv[index].className = 'ly-active'

                }
            })
        }





    })
    // 加入购物车
var newArr = []
oListbox.addEventListener('click', function(ev) {
        if (ev.target.className === 'ly-buttons2') {
            let id = ev.target.getAttribute('goodsId')
            newArr=JSON.parse(localStorage.getItem('cakeArr'))||[]
            // 是否找到商品
            let flag = true

            // 去重
            newArr.forEach(ele => {
                    if (ele.cake_id === id) {
                        ele.count++
                            flag = false
                    }
                })
                // console.log(id, arr)
                // 存一个商品对象值
            if (flag) {
                arr2.forEach(ele => {
                    if (ele.cake_id === id) {
                        newArr.push({
                            count: 1,
                            flag: true,
                            ...ele
                        })
                    }
                })
            }
            
            console.log(newArr)
                // 存到购物车列表页
            localStorage.setItem('cakeArr', JSON.stringify(newArr))
            window.history.go(0)
        }
        
        // 
    })
    //跳转详情 获取ID
window.setTimeout(function() {
    let allImg = document.querySelectorAll(".ly-lazy")
        // console.log(allImg)
    allImg.forEach(ele => {
        ele.addEventListener('click', function(ev) {
            // console.log("ok")
            if (ev.target.className === 'ly-lazy') {
                let id = ev.target.getAttribute('goodsId')

                localStorage.setItem('cakeImg', id)
            }
            window.location.href = "Details.html"
        })
    })

}, 3000)